<template>
  <div class="bottom">
    <div class="top_bg">
        <div class="top" @click="goTop"></div>
    </div>
    <div class="copyright_bg">广东护康网络科技有限公司 版权所有</div>
  </div>
</template>

<script>
export default {
    name:'bottom',
    data(){
        return {

        }
    },
    methods: {
       goTop(){
            let top = document.documentElement.scrollTop || document.body.scrollTop
            // 实现滚动效果
            const timeTop = setInterval(() => {
            document.body.scrollTop = document.documentElement.scrollTop = top -= 50
            if (top <= 0) {
                clearInterval(timeTop)
            }
            }, 20)
       } 
    }
}
</script>

<style lang="scss" scoped>
.bottom{
    padding-bottom:70px;
}
.top_bg{
    position:relative;
    padding:20px 0;
    .top{
        position:relative;
        border-radius: 50%;
        z-index:9;
        margin:0 auto;
        width:50px;
        height:50px;
        background: url('../../assets/img/app_top.png') center no-repeat #3460f2;
    }
    &::after{
        display: block;
        position: absolute;
        content: " ";
        top: 50%;
        width: 100%;
        height: 1px;
        transform: translatey(-50%);
        background: #3460f2;
    }
}
.copyright_bg{
    background: #3460f2;
    text-align:center;
    color:#fff;
    padding:10px 0;
}
</style>